<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <el-card class="box-card">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="基本信息"
          name="first"
          class="mmmkkk"
        >
          <el-row
            :gutter="10"
            class="lllkkk"
          >
            <el-col :span="3"> 员工编号: </el-col>
            <el-col
              v-if="HideHandoff"
              :span="5"
            >
              {{ employee.id }}
            </el-col>
            <el-col
              v-else
              :span="5"
            >
              <el-input
                v-model="employee.id"
                :disabled="true"
              ></el-input>
            </el-col>
            <el-col
              :span="3"
              :offset="1"
            > 司机名称:</el-col>
            <el-col
              v-if="HideHandoff"
              :span="4"
            >{{ employee.name }}</el-col>
            <el-col
              v-else
              :span="4"
            >
              <el-input
                v-model="employee.name"
                :disabled="true"
              ></el-input>
            </el-col>
            <el-col
              :span="3"
              :offset="1"
            >所属机构: </el-col>
            <el-col
              v-if="HideHandoff"
              :span="4"
            >
              {{ employee.agency.name }}</el-col>
            <el-col
              v-else
              :span="4"
            >
              <el-input
                v-model="employee.agency.name"
                :disabled="true"
              ></el-input>
            </el-col>
          </el-row>
          <el-row
            :gutter="10"
            class="lllkkk"
          >
            <el-col :span="3">电话: </el-col>
            <el-col
              v-if="HideHandoff"
              :span="5"
            >{{ employee.mobile }} </el-col>
            <el-col
              v-else
              :span="5"
            >
              <el-input
                v-model="employee.mobile"
                :disabled="true"
              ></el-input>
            </el-col>
            <el-col
              :span="3"
              :offset="1"
            >年龄: </el-col>
            <el-col
              v-if="HideHandoff"
              :span="4"
            >{{ employee.age }}</el-col>
            <el-col
              v-else
              :span="4"
            >
              <el-input v-model="employee.age"></el-input>
            </el-col>
          </el-row>
        </el-tab-pane>
        <!-- 驾驶信息详情与管理 -->
        <el-tab-pane
          label="驾驶信息"
          name="second"
        >
          <el-row
            :gutter="10"
            class="lllkkk"
          >
            <el-col :span="3"> 驾驶证号: </el-col>
            <el-col
              v-if="HideHandoff"
              :span="5"
            >
              {{ DrivingList.licenseNumber }}
            </el-col>
            <el-col
              v-else
              :span="5"
            >
              <el-input v-model="DrivingList.licenseNumber"></el-input>
            </el-col>
            <el-col
              :span="3"
              :offset="1"
            > 准驾车型:</el-col>
            <el-col
              v-if="HideHandoff"
              :span="4"
            >{{
              DrivingList.allowableType
            }}</el-col>
            <el-col
              v-else
              :span="4"
            >
              <el-input v-model="DrivingList.allowableType"></el-input>
            </el-col>
            <el-col
              :span="3"
              :offset="1"
            >初次领证日期: </el-col>
            <el-col
              v-if="HideHandoff"
              :span="4"
            >
              {{ DrivingList.initialCertificateDate }}</el-col>
            <el-col
              v-else
              :span="4"
            >
              <el-date-picker
                v-model="DrivingList.initialCertificateDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row
            :gutter="10"
            class="lllkkk"
          >
            <el-col :span="3"> 驾驶证有效期: </el-col>
            <el-col
              v-if="HideHandoff"
              :span="5"
            >
              {{ DrivingList.validPeriod }}
            </el-col>
            <el-col
              v-else
              :span="5"
            >
              <el-input v-model="DrivingList.validPeriod"></el-input>
            </el-col>
            <el-col
              :span="3"
              :offset="1"
            > 驾龄:</el-col>
            <el-col
              v-if="HideHandoff"
              :span="4"
            >{{
              DrivingList.driverAge
            }}</el-col>
            <el-col
              v-else
              :span="4"
            >
              <el-input v-model="DrivingList.driverAge"></el-input>
            </el-col>
            <el-col
              :span="3"
              :offset="1"
            >驾驶证类型: </el-col>
            <el-col
              v-if="HideHandoff"
              :span="4"
            >
              {{ DrivingList.licenseType }}</el-col>
            <el-col
              v-else
              :span="4"
            >
              <el-input v-model="DrivingList.licenseType"></el-input>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row
            :gutter="10"
            class="lllkkk"
          >
            <el-col :span="3"> 从业资格证: </el-col>
            <el-col
              v-if="HideHandoff"
              :span="5"
            >
              {{ DrivingList.qualificationCertificate }}
            </el-col>
            <el-col
              v-else
              :span="5"
            >
              <el-input
                v-model="DrivingList.qualificationCertificate"
              ></el-input>
            </el-col>
            <el-col
              :span="3"
              :offset="1"
            > 入场证信息:</el-col>
            <el-col
              v-if="HideHandoff"
              :span="4"
            >{{
              DrivingList.passCertificate
            }}</el-col>
            <el-col
              v-else
              :span="4"
            >
              <el-input v-model="DrivingList.passCertificate"></el-input>
            </el-col>
          </el-row>
          <!-- 第四行 -->
          <el-row
            :gutter="10"
            class="lllkkk"
          >
            <el-col :span="3">图片信息:</el-col>
            <el-col
              v-if="HideHandoff"
              :span="5"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="DrivingList.picture"
              >
              </el-image>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card class="boxscard">
      <!-- 底部按钮 -->
      <el-row>
        <el-col
          v-if="HideHandoff"
          :span="6"
          :offset="11"
        >
          <el-button
            type="danger"
            @click="HideHandoff = false"
          >编辑</el-button>
        </el-col>
        <el-col
          v-else
          :span="6"
          :offset="10"
        >
          <el-button
            type="danger"
            @click="EditDriver"
          >保存</el-button>
          <el-button @click="HideHandoff = true">取消</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import {
  driverDetail,
  driverDetailUpdate,
  driverLicenseDetail,
  driverLicenseDetailUpdate
} from '@/api/transit'
export default {
  data() {
    return {
      index: '1',
      activeName: 'first',
      // 接收员工基本信息
      employee: {},
      HideHandoff: true,
      // 接收司机驾驶证信息
      DrivingList: {},
      srcList: []
    }
  },
  created() {
    this.DriverDriver()
    this.DrivingLicense()
  },
  // 表头转换
  methods: {
    handleClick(tab, event) {
      this.HideHandoff = true
      this.index = tab.index
    },
    /**
     * 接收司机详情
     */
    async DriverDriver() {
      // console.log(+this.$route.query.id)
      const { data } = await driverDetail(this.$route.query.id)
      // console.log(data)
      this.employee = data
    },
    /**
     * 更新司机和驾驶证详情
     */
    async EditDriver() {
      if (this.index === '0') {
        await driverDetailUpdate(+this.employee.userId, { ...this.employee })
      } else if (this.index === '1') {
        // console.log('驾驶正更新成功')
        await driverLicenseDetailUpdate({ ...this.DrivingList })
      }
      this.$message.success('信息更新成功')
      this.HideHandoff = true
    },
    /**
     * 获取司机驾驶证信息
     */
    async DrivingLicense() {
      const { data } = await driverLicenseDetail(this.$route.query.id)
      this.DrivingList = data
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.driver-detail {
  /deep/ .el-container {
    flex-direction: column;
    margin-left: 0px;
  }
  .in {
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    /deep/ .el-aside {
      padding-bottom: 14px;
      width: 100% !important;
      display: flex;
      background-color: #ffffff;
      border-bottom: 1px solid #e5e7ec;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;
        }
      }
      .aside-item.active {
        font-size: 16px;
        font-weight: bold;
        color: #20232a;
        &:after {
          content: '';
          display: block;
          background-color: #e15536;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
  .box-card {
    height: 500px;
    margin: 20px 20px 0;
  }
  .boxscard {
    // height: 40px;
    margin: 2px 20px;
    // padding: 10px 20px 0;
  }
  .mmmkkk {
    margin-top: 20px;
  }
  .lllkkk {
    margin: 20px 0px;
  }
}
</style>
